<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.modal{
			   position: fixed;
			  	width: 400px;
			   height: 400px;
			   border: 1px solid #DADADA;
			   left: 50%;
			   top: 50%;
			   margin: -300px 0 0 -200px;
			   box-shadow: 0 0 16px rgba(0,0,0,0.2);
			   border-radius: 5px;
			   background: #fff;
		}
		.modal.drag{
			position: absolute;
			z-index: 5;
			margin: 0;
			left: 0;
			top:0;
		}
		.modal-header{
			border-bottom: 1px solid #eee;
    		margin: 0;
    		overflow: hidden;
    		    cursor: move;
		}
		.modal-header h4{
			    margin: 10px;
		}
		.modal-header .iconfont{
			    float: right;
			    font-style: normal;
			    color: #909090;
			    font-size: 24px;
			    cursor: pointer;
			    margin:0 15px 0 0;
			    font-family: "微软雅黑";
		}
	</style>
</head>
<body>
	<a href="javascript:;" class="btn" data-target="#modal">显示弹窗</a>
	<div id="modal" style="display:none" class="modal drag">
		<div class="modal-header">
		<i class="iconfont close">x</i>
			<h4>弹窗</h4>
			
		</div>
		<div class="modal-body"></div>
	</div>
<a href="javascript:;" class="btn" data-target="#modal1">显示弹窗</a>
	<div id="modal1" style="display:none" class="modal">
		<div class="modal-header">
		<i class="iconfont close">x</i>
			<h4>弹窗</h4>
			
		</div>
		<div class="modal-body"></div>
	</div>
	<a href="javascript:;" class="btn" data-target="#modal2">显示弹窗</a>
	<div id="modal2" style="display:none" class="modal">
		<div class="modal-header">
		<i class="iconfont close">x</i>
			<h4>弹窗</h4>
			
		</div>
		<div class="modal-body"></div>
	</div>
	<script src="https://www.baochoudai.com/bcd/js/jquery.js"></script>
	<script type="text/javascript">
		(function($){
			$.fn.modal=function(o){
				var agm={
					closeBtn:'.close',
					htmlShowBtn:true,
					header:'.modal-header',
					showStyle:'normal'
				}
				var opt=$.extend(agm,o);
				var _this=$(this);
				if(opt.htmlShowBtn){
					var showBtn=$('[data-target="#'+_this.attr('id')+'"]');
					showBtn.click(function(){
						show();
					})
				}
				var close=_this.find(opt.closeBtn);
				var header=_this.find(opt.header);

				close.click(function(){
					hide();
				})
				function hide(){
					if(opt.showStyle=="normal"){
						_this.hide(200)
					}else if(opt.showStyle=="slide"){
						_this.slideUp(200)
					}else if(opt.showStyle=="fade"){
						_this.fadeOut(200)
					}
				}
				function show(){
					if(opt.showStyle=="normal"){
						_this.show(200)
					}else if(opt.showStyle=="slide"){
						_this.slideDown(200)
					}else if(opt.showStyle=="fade"){
						_this.fadeIn(200)
					}
					
					
				}
				

				//拖拽	代码
				var drag={
					startX:0,//开始的鼠标X位置
					startY:0,//开始的鼠标Y位置
					moveX:0,//移动时的鼠标X位置
					moveY:0,//移动时的鼠标Y位置
					endX:0,	//结束后的鼠标X位置
					endY:0	//结束后的鼠标Y位置
				}
				function mouseMove(event){
					//当前鼠标在的位置 减去 鼠标按下时的位置  在加上 之前 这个modal 所在位置 可得当前弹窗要移动到的 left 和top 的值
					drag.moveX=event.pageX-drag.startX;
					drag.moveY=event.pageY-drag.startY;
					_this.css({"left":drag.endX+drag.moveX,"top":drag.endY+drag.moveY})
				}
				function mouseUp(event){
					//当前鼠标放起时 记录下 当前弹窗在的位置，并且取消 mousemove mouseup的事件绑定
					drag.endX=drag.endX+drag.moveX;
					drag.endY=drag.endY+drag.moveY;
					$(document).off('mousemove',mouseMove);
					$(document).off('mouseup',mouseUp);
					
				}
				header.mousedown(function(event){
					//header 上 鼠标按下时。记录当前 x y轴的值，同时绑定document的 鼠标放起 和 鼠标移动事件
					drag.startX=event.pageX;
					drag.startY=event.pageY;
					$(document).mouseup(mouseUp)
					$(document).mousemove(mouseMove);
				})

				
			}
		})(jQuery)
		$('#modal').modal({showStyle:"fade"})
		$('#modal1').modal({showStyle:"slide"})
		$('#modal2').modal()
	</script>
</body>
</html>